<template>
  <div 
    class="platform" 
    :style="platformStyle"
    :class="{ 'current': isCurrent, 'start': platform.type === 'start' }"
  >
    <div class="platform-top"></div>
    <div class="platform-side"></div>
  </div>
</template>

<script>
export default {
  name: 'Platform',
  props: {
    platform: {
      type: Object,
      required: true
    },
    isCurrent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    platformStyle() {
      return {
        left: this.platform.x + 'px',
        top: this.platform.y + 'px',
        width: this.platform.width + 'px'
      }
    }
  }
}
</script>

<style scoped>
.platform {
  position: absolute;
  transform: translate(-50%, -50%);
}

.platform-top {
  width: 100%;
  height: 15px;
  background: #4CAF50;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.platform-side {
  width: 100%;
  height: 10px;
  background: #388E3C;
  border-radius: 0 0 5px 5px;
}

.platform.current .platform-top {
  background: #FFC107;
}

.platform.start .platform-top {
  background: #2196F3;
}

.platform.start .platform-side {
  background: #1976D2;
}

.platform.special .platform-top {
  background: #9C27B0;
  animation: pulse 1s infinite;
}

.platform.special .platform-side {
  background: #7B1FA2;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
</style>